<template>
  <div class="menu_type">
    <template v-if="hasOneChild(item.children,item)">
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange"
      >{{onlyOneChild.meta.title}}</el-checkbox>
      <div style="margin: 5px 0;"></div>
      <el-checkbox-group v-model="checkedpermissions" @change="handleCheckedPermissionsChange">
        <el-checkbox
          v-for="permission in permissions"
          :label="permission"
          :key="permission"
        >{{permission}}</el-checkbox>
      </el-checkbox-group>
    </template>
    <template v-else>
      <div style="margin-bottom:6px;"><span class="menu_title">{{item.meta.title}}</span></div>
      <menu-item v-for="child in item.children" :key="child.path" :item="child" :ref="child.path"></menu-item>
    </template>
  </div>
</template>
<script>
export default {
 name: "MenuItem",
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  data() {
    this.onlyOneChild = null;
    return {
      checkAll: false,
      permissions:this.$store.state.user.PagePermission,
      checkedpermissions: ["look"],
      isIndeterminate: true
    };
  },
  methods: {
    hasOneChild(children = [], parent) {
      const showingChildren = children.filter(item => {
        if (item.hidden) {
           return false;
        } else {
          this.onlyOneChild = item;
          return true;
        }
      });
      if (children.length === 1) {
        return true;
      }
      if (children.length === 0) {
        this.onlyOneChild = { ...parent };
        return true;
      }
      return false;
    },
    handleCheckAllChange(val) {
      this.checkedpermissions = val ? this.permissions : [];
      this.isIndeterminate = false;
    },
    handleCheckedPermissionsChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.permissions.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.permissions.length;
    },
    resetData(){
     this.checkAll=false;
     this.checkedpermissions=['look'];
     this.isIndeterminate=true;
    }
  }
};
</script>
<style lang="scss">
 .menu_type{
   margin-bottom: 15px;
 }
 .menu_title{
     color: #409EFF;
 }
</style>